<template>
  <div class="stat-view--container">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="平台名称">
        <el-select v-model="statCondition.platformName" placeholder="平台名称" style="width: 150px" class="filter-item" @change="handleGetEnums">
          <el-option v-for="item in platformOptions" :key="item.name" :label="item.name===''?'全部':item.describe+'('+item.name+')'" :value="item.name===''?'':item.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="部署环境">
        <el-select v-model="statCondition.env" placeholder="部署环境" style="width: 100px" class="filter-item" @change="handleGetEnums" >
          <el-option v-for="item in envOptions" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="客户端">
        <el-select v-model="statCondition.clientName" placeholder="客户端" default-first-option filterable clearable allow-create class="filter-item" style="width: 150px">
          <el-option v-for="item in clientNameOptions" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="模块">
        <el-select v-model="statCondition.serviceCategory" placeholder="模块" default-first-option filterable clearable allow-create class="filter-item" style="width: 150px">
          <el-option v-for="item in serviceCategoryOptions" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="服务">
        <el-select v-model="statCondition.serviceName" placeholder="服务" default-first-option filterable clearable allow-create class="filter-item" style="width: 150px">
          <el-option v-for="item in serviceNameOptions" :key="item" :label="item" :value="item"/>
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="dateRange"
          :picker-options="pickerOptions"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 400px"
        />
      </el-form-item>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleStat">统计</el-button>
    </el-form>
    <div id="myChart" ref="chart" :style="{width: '100%', height: '750px'}"/>
  </div>
</template>
<script>
import { getEnums } from '@/api/console'
import waves from '@/directive/waves'
import { stat } from '@/api/stat'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  directives: { waves },
  components: {
  },
  props: {
    statType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      statCondition: {
        platformName: this.$store.getters.platforms[0].name,
        clientName: '',
        serviceCategory: '',
        serviceName: '',
        env: '',
        fromDate: '',
        toDate: ''
      },
      listLoading: false,
      dateRange: undefined,
      platformOptions: this.$store.getters.platforms,
      envOptions: ['dev', 'test', 'pre', 'product'],
      userInfoTypeOptions: undefined,
      clientNameOptions: undefined,
      serviceCategoryOptions: undefined,
      serviceNameOptions: undefined,
      methodNameOptions: undefined,
      rpcTypeOptions: undefined,
      resultOptions: undefined,
      pickerOptions: {
        shortcuts: [{
          text: '最近1天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近3天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
  },
  mounted() {
    this.handleGetEnums()
  },
  methods: {
    handleGetEnums() {
      this.listLoading = true
      getEnums(this.statCondition.platformName, this.statCondition.env).then(response => {
        if (response.code === '0000') {
          const data = response.data
          this.clientNameOptions = data.clientNameList
          this.serviceCategoryOptions = data.serviceCategoryList
          this.serviceNameOptions = data.serviceNameList
          this.envOptions = data.envList
          if (this.statCondition.env === '') {
            this.statCondition.env = this.envOptions[0]
          }
        }
        this.listLoading = false
      })
    },
    handleStat() {
      this.listLoading = true
      this.statCondition.fromDate = (this.dateRange === undefined || this.dateRange === null) ? '' : this.dateRange[0]
      this.statCondition.toDate = (this.dateRange === undefined || this.dateRange === null) ? '' : this.dateRange[1]
      const myChart = echarts.init(this.$refs.chart)
      stat(this.statType, this.statCondition).then(response => {
        console.info(response)
        if (response.code === '0000') {
          this.$emit('initChart', myChart, response.data)
        }
        this.listLoading = false
      })
    }
  }
}
</script>
<style>
</style>

